<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js实现选项卡+无缝轮播特效</title>
	<style>
		*{margin:0;padding:0;list-style-type:none;}
		a,img{border:0;}
		body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
		/* TTSlider */
		.TTSlider{width:980px;margin:30px auto}
		.TTSlider li{list-style-type:none;float:left;}
		.TTSlider li img{border:none;}
		.TTSliderTitle{background:#FAFAFA;height:63px;}
		.TTSliderTitle ul{width:980px;}
		.TTSliderTitle li{width:140px;height:63px;position:relative;z-index:3;left:0;}
		.TTSliderTitle li div{border-right:1px solid #C3C5C7;border-top:1px solid #C3C5C7;left:0;right:0;top:0;bottom:0;position:absolute;_width:139px;_height:62px}
		.TTSliderTitle .cur div{border:2px solid #333;background:#fff;z-index:3;border-bottom:none;bottom:-2px;_height:63px;_width:136px}
		.TTSliderTitle .noneBorRight div{border-right:none;}
		.TTSliderTitle li a{display:block;width:50%;float:left;height:100%;line-height:61px;text-decoration:none;overflow:hidden;*width:49%;font-size:12px}
		.TTSliderTitle li a img{height:50px;margin:6px;width:50px}
		/* TTSliderPic */
		.TTSliderPic{width:910px;padding:13px 33px;border:2px solid #333;position:relative;height:180px;z-index:1}
		.TTSliderPicList{position:relative;width:890px;overflow:hidden;height:180px;}
		.TTSliderPic ul{position:absolute;display:none;top:3px;left:0}
		.TTSliderPic ul.show{display:block;}
		.TTSliderPic li img{width:150px }
		.TTSliderPic li{width:150px;padding:0 14px;height:180px;}
		.TTSliderPic li a{display:block;height:150px;overflow:hidden;}
		.TTSliderPic li p{height:30px;line-height:30px;text-align:center;color:#ED0A0A}
		.TTSliderPrevBtn,.TTSliderNextBtn{height:100%;width:45px;position:absolute;z-index:999;top:0;text-align:center;}
		.TTSliderPrevBtn{left:0}
		.TTSliderNextBtn{right:0;}
		.TTSliderPrevBtn a,.TTSliderNextBtn a{height:30px;width:20px;display:inline-block;background:url(images/btn.png) no-repeat;margin-top:75px}
		.TTSliderNextBtn a{background:url(images/btn.png) no-repeat -30px 0}
	</style>
</head>
<body>
<div class='TTSlider' id='TTSlider'>
	<div class='TTSliderTitle'>
		<ul>
			<li class='cur'><div><a href="javascript:void(0);"><img src='images/one.jpg'/></a><a href="javascript:void(0);">栏目一</a></div></li>
			<li><div><a href="javascript:void(0);"><img src='images/two.jpg'/></a><a href="javascript:void(0);">栏目二</a></div></li>
			<li><div><a href="javascript:void(0);"><img src='images/one.jpg'/></a><a href="javascript:void(0);">栏目三</a></div></li>
			<li><div><a href="javascript:void(0);"><img src='images/two.jpg'/></a><a href="javascript:void(0);">栏目四</a></div></li>
			<li><div><a href="javascript:void(0);"><img src='images/one.jpg'/></a><a href="javascript:void(0);">栏目五</a></div></li>
			<li><div><a href="javascript:void(0);"><img src='images/two.jpg'/></a><a href="javascript:void(0);">栏目六</a></div></li>
			<li><div><a href="javascript:void(0);"><img src='images/one.jpg'/></a><a href="javascript:void(0);">栏目七</a></div></li>
		</ul>
	</div>
	<div class='TTSliderPic'>
		<div id='TTSliderPrevBtn' class='TTSliderPrevBtn'><a href='javascript:;'></a></div>
		<div id='TTSliderNextBtn' class='TTSliderNextBtn'><a href='javascript:;'></a></div>
		<div class='TTSliderPicList'>
			<ul class='show'>
				<li class='on'><a href="javascript:void(0);"><img src='images/1.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/2.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/3.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/4.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/5.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/11.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/4.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/5.jpg'/></a><p>35元</p></li>
			</ul>
			<ul>
				<li><a href="javascript:void(0);"><img src='images/11.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/22.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/33.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/11.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/55.jpg'/></a><p>85元</p></li>
			</ul>
			<ul>
				<li><a href="javascript:void(0);"><img src='images/2.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/22.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/33.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/11.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/55.jpg'/></a><p>85元</p></li>
			</ul>
			<ul>
				<li><a href="javascript:void(0);"><img src='images/5.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/33.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/11.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/55.jpg'/></a><p>85元</p></li>
			</ul>
			<ul>
				<li><a href="javascript:void(0);"><img src='images/3.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/33.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/11.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/55.jpg'/></a><p>85元</p></li>
			</ul>
			<ul>
				<li><a href="javascript:void(0);"><img src='images/11.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/22.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/33.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/11.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/55.jpg'/></a><p>85元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/11.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>35元</p></li>
			</ul>
			<ul>
				<li><a href="javascript:void(0);"><img src='images/4.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/22.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/33.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/11.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/11.jpg'/></a><p>75元</p></li>
				<li><a href="javascript:void(0);"><img src='images/44.jpg'/></a><p>35元</p></li>
				<li><a href="javascript:void(0);"><img src='images/55.jpg'/></a><p>85元</p></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>
<script>
	window.onload=function()
	{
		var oTTSlider=document.getElementById('TTSlider');
		var oTTSliderTitle=getByClass('TTSliderTitle',oTTSlider,'div')[0];
		var aSubNav=oTTSliderTitle.getElementsByTagName('li');
		var oTTSliderPrevBtn=document.getElementById('TTSliderPrevBtn');
		var oTTSliderNextBtn=document.getElementById('TTSliderNextBtn');
		var oTTSliderPicList=getByClass('TTSliderPicList',oTTSlider,'div')[0];
		var aItem=oTTSliderPicList.getElementsByTagName('ul');
		var len=aItem.length;
		var showIndex=aItemImgWidth=iNow=0;
		var aEle=[];
		for(var i=0;i<len;i++)
		{
			var aItemImgs=aItem[i].getElementsByTagName('li');
			if(!aItemImgWidth)
			{
				aItemImgWidth=aItemImgs[0].offsetWidth;
			}
			aEle.push(aItemImgs);	//存入数组,考虑到有多个轮播,且每个轮播里面的图片个数可能不一致.


			aSubNav[i].index=i;
			aSubNav[i].onmouseover=function()//切换
			{
				var index=showIndex=this.index;
				for(var j=0;j<len;j++)
				{
					if(j!=index)
					{
						aItem[j].className='';
						aSubNav[j].className='';
					}
				}
				aSubNav[index-1] && (aSubNav[index-1].className='noneBorRight' );
				if(index>0)
				{
					(aSubNav[0].getElementsByTagName('div')[0].style.borderLeft='1px solid #ccc');
				}
				else
				{
					aSubNav[0].getElementsByTagName('div')[0].style.borderLeft='2px solid #333';
				}

				aSubNav[index].className='cur';
				aItem[index].className='show';
			}
		}
		for(var i=0;i<len;i++)
		{
			var num=aEle[i].length;
			if(aItem[i].className=='show')
			{
				showIndex=i;
			}
			aItem[i].style.width=num*(aItemImgWidth)+'px'
		}

		oTTSliderNextBtn.onclick=function()
		{
			var maxNum=aEle[showIndex].length-1;
			aItem[showIndex].insertBefore(aEle[showIndex][maxNum],aEle[showIndex][0]);
			aItem[showIndex].style.left=-aItemImgWidth+'px';
			doMove(aItem[showIndex],0);
		};
		oTTSliderPrevBtn.onclick=function()
		{
			doMove(aItem[showIndex],-(aItemImgWidth),function(){
				aItem[showIndex].style.left=0;
				aItem[showIndex].appendChild(aEle[showIndex][0])
			});
		};
		function doMove(o,t,fn)
		{
			clearInterval(o.timer);
			o.timer=setInterval(function(){
				var is= (t-getStyle(o,'left'))/8;
				is= is>0?Math.ceil(is):Math.floor(is);
				if(t==o.offsetLeft)
				{
					clearInterval(o.timer);
					(typeof fn==='function') && fn();
				}
				else
				{
					o.style.left=o.offsetLeft+is+'px';
				}

			},30)
		}
		function getStyle(o,a)
		{
			return o.currentStyle ? parseFloat(o.currentStyle[a]) : parseFloat(getComputedStyle(o,false)[a]);
		}
		function getByClass(s,p,e)
		{
			var reg=new RegExp('(\\b)'+s+'(\\b)');
			var aElement=(p||document).getElementsByTagName(e||'*');
			var aResult=[];
			for(var i=0;i<aElement.length;i++)
			{
				reg.test(aElement[i].className) && aResult.push(aElement[i]);
			}
			return aResult;
		}
	}
</script>

